<template>
  <div class="page_body">
    <div class="bind_phone_body">
      <img class="bind_phone_body_bg" src="../../assets/image/login_bg01.png" />

      <div class="bind_phone_box">
        <div class="bind_phone_box_title">绑定手机</div>
        <div class="bind_phone_box_item">
          <div class="bind_phone_box_item_name">手机号</div>
          <div class="bind_phone_box_item_input_box">
            <input
              id="bind_phone_step_item_input"
              type="number"
              placeholder="请输入您的手机号"
              v-model="phone"
            />
            <div
              :class="[
                getCodeKey
                  ? 'register_from_item_get_code_btn'
                  : 'register_from_item_get_code_btn disabled_send',
              ]"
              @click="getCodeFn()"
            >
              {{ getCodeTime }}
            </div>
          </div>
        </div>

        <div class="bind_phone_box_item">
          <div class="bind_phone_box_item_name">验证码</div>
          <div class="bind_phone_box_item_input_box">
            <input
              id="bind_phone_step_item_input_code"
              type="number"
              placeholder="请输入您的验证码"
              v-model="code"
            />
          </div>
        </div>

        <div @click="bindBtn()" class="bind_phone_box_btn">确定</div>
      </div>

      <div class="bind_phone_box_item logo_box">
        <img
          class="bind_phone_box_logo"
          src="../../assets/image/login_bottom_logo01.png"
          style="width: 1rem"
        />
        <img
          class="bind_phone_box_logo"
          src="../../assets/image/login_bottom_logo02.png"
          style="width: 0.9rem"
        />
        <img
          class="bind_phone_box_logo"
          src="../../assets/image/login_bottom_logo03.png"
          style="width: 2.5rem"
        />
      </div>
    </div>
  </div>
</template>
<style src="../../assets/css/home/bindPhone.css" scoped></style>

<script>
import { Toast } from "mint-ui";

export default {
  name: "BindPhone",
  components: {},
  data() {
    return {
      topTitle: "绑定手机", // 顶部组件参数设置
      baseAPIUrl: this.$store.state.baseAPIUrl,
      stepKey: 5,
      phone: "", // 手机号
      phoneShow: "", // 手机号显示
      code: "", // 校验码
      getCodeTime: "获取验证码", // 验证码时间
      getCodeKey: true, // 获取验证码控制
    };
  },
  created: function () {},
  methods: {
    // 设置重新获取验证码时间
    setCodeTimeFn: function () {
      let that = this;
      let time = 30;
      this.codeInterval = setInterval(function () {
        if (time > 0) {
          that.getCodeTime = "重新发送(" + time + ")";
          time = time - 1;
        } else {
          that.getCodeTime = "获取验证码";
          that.getCodeKey = true;
          clearInterval(that.codeInterval);
        }
      }, 1000);
    },
    // 获取验证码
    getCodeFn: function () {
      let that = this;
      if (this.phone == "") {
        Toast({
          message: "手机号不能为空",
        });
        return;
      } else {
        let telText =
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/;
        if (!telText.test(this.phone)) {
          Toast({
            message: "手机号格式不正确",
          });
          return false;
        } else {
          if (this.getCodeKey) {
            let url = "/mobile/getPhoneCode";
            let data = {
              phone: that.phone,
            };
            that.getCodeKey = false;
            that.setCodeTimeFn();
            that.axios
              .post(url, data)
              .then((response) => {
                if (response.code != 0) {
                  that.getCodeKey = true;
                  clearInterval(that.codeInterval);
                  that.getCodeTime == "获取验证码";
                  Toast({
                    message: response.msg,
                    duration: 3000,
                  });
                }
              })
              .catch(function (error) {
                that.getCodeKey = true;
                that.getCodeTime = "获取验证码";
                clearInterval(that.codeInterval);
                console.log(error);
              });
          }
        }
      }
    },
    // 绑定手机号
    bindBtn: function () {
      let that = this;
      let url = "/mobile/checkPhoneCode";
      let data = {
        phone: that.phone,
        phone_code: that.code,
      };
      if (this.phone == null || this.phone == "" || this.phone == undefined) {
        Toast({
          message: "手机号不能为空1",
        });
        return;
      }
      if (this.code == null || this.code == "" || this.code == undefined) {
        Toast({
          message: "校验码不能为空",
        });
        return;
      }
      that.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            that.$store.commit("set_loginToken", response.token);
            that.$store.commit("set_loginUserId", response.userid);
            that.$store.commit("set_hasPhone", 2);
            let before_Path = that.$store.state.before_Path;
            if (before_Path !== "/") {
              that.$router.replace({
                path: before_Path,
              });
            }
            // if (this.beforePath !== "/") {
            //   that.$router.replace({
            //     path: this.beforePath,
            //   });
            // }
            else {
              that.$router.replace({
                name: "gameCenter",
              });
            }
            // that.$router.replace({
            //   name: "gameCenter",
            // });
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 下一步
    // nextStep: function () {
    //   if (this.phone == "") {
    //     return;
    //   } else {
    //     let telText = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/;
    //     if (!telText.test(this.phone)) {
    //       Toast({
    //         message: "手机号格式不正确",
    //       });
    //       return false;
    //     } else {
    //       let be = this.phone.substring(0, 3);
    //       let af = this.phone.substring(9, this.phone.length);
    //       this.phoneShow = be + "******" + af;
    //       this.stepKey = this.stepKey + 1;
    //       this.getCodeFn();
    //     }
    //   }
    // },
    // 返回
    // toBackFn: function () {
    //   if (this.stepKey == 1) {
    //     this.$router.go(-1);
    //   } else {
    //     this.stepKey = this.stepKey - 1;
    //     this.code = "";
    //   }
    // },
  },
};
</script>
